import React, { FC, useEffect } from 'react'
import styles from './Login.module.scss'
import { Space, Typography, Form, Input, Button, Checkbox } from 'antd'
import { UserAddOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import { REGISTER_PATHNAME } from '../router'
const { Title } = Typography
const Login: FC = () => {
    const [form] = Form.useForm()
    const USERNAME_KEY = 'USERNAME'
    const PASSWORD_KEY = 'PASSWORD'
    const rememberUser = (username: string, password: string) => {
        localStorage.setItem(USERNAME_KEY, username)
        localStorage.setItem(PASSWORD_KEY, password)
    }
    const forgetUser = () => {
        localStorage.removeItem(USERNAME_KEY)
        localStorage.removeItem(PASSWORD_KEY)
    }
    const getUserFromStorage = () => {
        return {
            username: localStorage.getItem(USERNAME_KEY) || "",
            password: localStorage.getItem(PASSWORD_KEY) || ""
        }
    }
    // 初始化时执行
    useEffect(() => {
        const { username, password } = getUserFromStorage()
        form.setFieldsValue({ username, password })
    }, [])
    // 点击提交时触发
    const onFinishHandle = (values: any) => {
        console.log('values', values)
        const { username, password, remember } = values
        if (remember) {
            // 记住
            rememberUser(username, password)
        } else {
            // 忘记
            forgetUser()
        }
    }
    return <div className={styles.container}>
        <div>
            <Space>
                <Title level={2}><UserAddOutlined /></Title>
                <Title level={2}>用户登录</Title>
            </Space>
        </div>
        <div>
            <Form
                name='login'
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinishHandle}
                form={form}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        { required: true, message: '请输入用户名' },
                        { type: 'string', min: 5, max: 20, message: '字符长度在 5-20 之间' },
                        { pattern: /^\w+$/, message: '只能是数字字母下划线' }
                    ]}
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>
                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        { required: true, message: '请输入密码' }
                    ]}
                >
                    <Input.Password placeholder='请输入密码'></Input.Password>
                </Form.Item>
                <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8 }}>
                    <Checkbox>记住我</Checkbox>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Space>
                        <Button type='primary' htmlType='submit'>登录</Button>
                        <Link to={REGISTER_PATHNAME}>注册新用户</Link>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    </div>
}

export default Login